<template>
  <div class="fullscreen-background">
    <div id="app">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Register from './components/Register.vue';
import Login from './components/Login.vue';
import CreateTeam from './components/CreateTeam.vue';
import JoinTeam from './components/JoinTeam.vue';
import Application from './components/Application.vue';
import HomePage from './components/HomePage.vue';
import Account from './components/Account.vue';
import { useRouter, useRoute } from 'vue-router';

export default {
  name: 'App',
  components: {
    Register,
    Login,
    CreateTeam,
    JoinTeam,
    Application,
    HomePage,
    Account,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();

    const urlUID = route.query.UID;
    const storedUID = localStorage.getItem('UID');

    if (!urlUID || urlUID !== storedUID) {
      router.push('/');
    }

    return { route };
  },
};
</script>

<style>
#app {
  font-family: "微软雅黑", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: auto auto;
  display: flex;
  justify-content: center;
}

.fullscreen-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('src/assets/BigbackGround .png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
</style>